<template>
	<view>
		<index ref="indexRef" v-if="curIn==='index'" @changeTab="changeTab"></index>
		<order v-if="curIn==='order'" @changeTab="changeTab"></order>
		<user v-if="curIn==='user'"></user>

		<view class="tabbar-wrap">
			<view class="tabbar">
				<view class="action" :class="curIn===item.key?'active-index':'text-gray'" v-for="item in tabList"
					:key="item.key" @click="onTabChange(item.key)">
					<view class='img-wrap'>
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>


		<tn-popup bg-color="transparent" v-model="showLoginPopup">
			<view class="action-login">
				<view class="action">
					<view @click="checkAgree" v-if="!isAgree" class="btn">
						手机快捷登录
					</view>
					<button v-else class="btn active" type="default" open-type="getPhoneNumber"
						@getphonenumber="handleGetPhoneNumber">
						<image src="../../static/login.jpg" mode=""></image>
					</button>
				</view>
			</view>
		</tn-popup>


		<tn-popup v-model="showPopup">
			<view class="modal">
				<view class="tip-container">
					<view class="tip">YongBao减脂餐想要</view>
					<view class="tip"> 获取您的昵称和头像 </view>

					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="url" :src="avatar_url"></image>
					</button>

					<view class="nickname">
						<input type="nickname" v-model="nickname" maxlength="50" placeholder="点击输入昵称" />
					</view>
				</view>

				<view class="action">
					<view @click="cancel" class="btn"> 取消 </view>
					<view @click="getUserProfile" class="btn active"> 同意 </view>
				</view>
			</view>
		</tn-popup>

	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		storeToRefs
	} from 'pinia';
	import {
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';

	import {
		useAppStore
	} from '@/store';

	import {
		getPhoneNumber,
		authLogin
	} from "@/api/user";

	import {
		uploadImage
	} from "@/api/common";




	import IndexIcon from '@/static/tabbar/index.png';
	import OrderIcon from '@/static/tabbar/order.png';
	import UserIcon from '@/static/tabbar/user.png';
	import index from '@/pages/index/index.vue';
	import order from '@/pages/order/index.vue';
	import user from '@/pages/user/index.vue';


	const appStore = useAppStore();
	const showLoginPopup = computed(() => appStore.showLoginPopup);

	const isAgree = ref(true);
	const phoneNumber = ref("");
	const showPopup = ref(false);
	const nickname = ref("");
	const avatar_url = ref("");


	onShow(() => {
		const token = uni.getStorageSync('token');
		if (token) {
			appStore.CLOSE_LOGIN_POPUP();
		}
	})

	const onChooseAvatar = async (e) => {
		const res = await uploadImage(e.detail.avatarUrl, {
			module: "avatar",
		});
		if (res) {
			avatar_url.value = res;
		}
	};

	// 1.通过code获取手机号
	const handleGetPhoneNumber = async (e) => {
		if (e.detail.errMsg == "getPhoneNumber:ok") {
			const res = await getPhoneNumber({
				code: e.detail.code,
			});
			phoneNumber.value = res.data.phoneNumber;
			// 2.如果之前已经注册过了 则直接去首页 并设置 token
			if (res.data.register === 1) {
				uni.setStorageSync("token", res.data.token);
				appStore.CLOSE_LOGIN_POPUP();
			} else {
				// 3.没有注册就弹框-然后获取用户头像和昵称
				appStore.CLOSE_LOGIN_POPUP();
				showPopup.value = true;
			}
		} else {
			uni.showToast({
				icon: "none",
				title: "请授权登录",
			});
		}
	};
	// 获取用户昵称和头像
	const getUserProfile = () => {
		if (!avatar_url.value || !nickname.value) {
			uni.showToast({
				title: "请设置头像和昵称",
				icon: "none",
			});
			return;
		}
		if (uni.getUserProfile) {
			// 获取用户信息
			uni.getUserProfile({
				desc: "登录",
				lang: "zh_CN",
				success(info) {
					handleLogin(info);
				},
			});
		}
	};

	// 调用后端登录接口
	const login = async (info, code) => {
		const res = await authLogin({
			code,
			avatar: avatar_url.value,
			nickName: nickname.value,
			phoneNumber: phoneNumber.value,
		});
		if (res.data) {
			uni.setStorageSync("token", res.data);
			showPopup.value = false;
		}
	};

	// 4.用户点击确定获取用户头像和昵称
	const handleLogin = (info) => {
		uni.login({
			provider: "weixin",
			success(res) {
				login(info, res.code);
			},
		});
	};

	const checkAgree = () => {
		if (!isAgree.value) {
			uni.showToast({
				icon: "none",
				title: "请同意用户协议和隐私政策",
			});
		}
	};
	const cancel = () => {
		showPopup.value = false;
		appStore.CLOSE_LOGIN_POPUP();
	};


	onShareAppMessage(() => {
		return {
			title: 'YongBao 减脂餐',
			path: '/pages/page/index'
		}
	})

	onShareTimeline(() => {
		return {
			title: 'YongBao 减脂餐',
			path: '/pages/page/index'
		}
	})

	const curIn = ref('index');

	const tabList = [{
			name: '首页',
			key: 'index',
			icon: IndexIcon,
		},
		{
			name: '订单',
			key: 'order',
			icon: OrderIcon,
		},
		{
			name: '我的',
			key: 'user',
			icon: UserIcon,
		},
	]

	const changeTab = (key) => {
		curIn.value = key;
	}

	const onTabChange = (key) => {
		const token = uni.getStorageSync('token');
		console.log('token',token);
		if(!token){
			appStore.OPEN_LOGIN_POPUP(); // 打开登录弹框
			return;
		}
		curIn.value = key;
		// 切换底部导航时，移除从首页点餐到订单页面的数据
		if (key !== 'order') {
			uni.removeStorageSync('foodList');
		}
	};
</script>

<style lang="scss">
	.tabbar-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx 77rpx;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;

		.tabbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			// height: 155rpx;
			background-color: #33354e;
			border-radius: 24rpx;

			.action {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 175rpx;
				height: 145rpx;
				color: #ffffff;
				font-size: 28rpx;

				.img-wrap {
					width: 50rpx;
					height: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.active-index {
		background: #3eb194;
		border-radius: 24rpx;
	}

	.login-modal {
		width: 700rpx;
		height: 400rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;

		.login-btn {
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			color: #ffffff;
			font-size: 30rpx;
			font-weight: bold;
			background-color: #ffa200;
			border-radius: 40rpx;
		}
	}




	// 头像
	.modal {
		width: 538rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;

		.tip-container {
			text-align: center;
			margin-top: 80rpx;
		}

		.tip {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.action {
			margin-top: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-direction: row;
		}

		.btn {
			width: 50%;
			border-radius: 0;
			background-color: #fff;
			color: rgba(0, 0, 0, 0.5);
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			&.active{
				color: #49b9fe;
			}
		}
	}

	.avatar-btn {
		margin-top: 72rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 2rpx solid #ffffff;
		padding: 0;

		.url {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.nickname {
		margin: 20rpx auto 40rpx;
		width: 486rpx;
		height: 84rpx;
		background: #ebebeb;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 0.3);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		input {
			width: 486rpx;
			height: 84rpx;
			padding-left: 32rpx;
		}
	}




	.action-login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx 20rpx;

		.btn {
			width: 580rpx;
			height: 227rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: 500;
			margin: 0;
			padding: 0;
			color: #fffefe;
			background: transparent;

			&::after {
				display: none;
			}

			&.active {
				color: #fff;

			}
		}

		.read {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			font-size: 27rpx;
			font-weight: 400;
			color: #999999;

			label {
				display: flex;
				align-items: center;
			}

			.word {
				height: 56rpx;
				display: flex;
				align-items: center;
			}

			.blue {
				color: #49b9fe;
			}
		}
	}
</style>